<template>
	<view class="reportdetail" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="title">
			<text>上报详情</text>
		</view>
		<scroll-view class="scroll-Y" scroll-y="true" style="flex: 1;">
			<view class="main" style="background: none;">
				<view class="depart">
					<text style="color:#009ff1">所属部门</text>
					<text>{{ option.departmentName }}</text>
				</view>
				<view class="reportuser">
					<text style="color:#009ff1">上报人</text>
					<text>{{ reportinfo.userName }}</text>
				</view>
				<view class="reporttime">
					<text style="color:#009ff1">上报时间</text>
					<text>{{ reportinfo.reportTime }}</text>
				</view>
				<view class="adress">
					<text style="color:#009ff1">详细地址</text>
					<text>{{ reportinfo.address }}</text>
				</view>
				<view class="imginfo">
					<text style="font-size:12px;color:#009ff1;margin-bottom:10px;">情况说明</text>
					<text style="font-size:12px;color:#fff;">{{ reportinfo.reason }}</text>
					<image v-if="reportinfo.imageUrl" :src="reportinfo.imageUrl" style="width:100px;height:100px" mode="aspectFit" />
				</view>
				<view class="vidioinfo">
					<text style="font-size:12px;color:#009ff1;margin-bottom:10px;">视频说明</text>
					<video v-if="reportinfo.videoUrl" :src="reportinfo.videoUrl" />
				</view>
				<view class="addreport" @click="addreport">＋</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				reportinfo: {},
				option: {},
			};
		},
		methods: {
			onLoad: function(option) {
				this.option = option;
			},
			onShow() {
				let id = this.option.warningMessageID;
				ajax({
					url: "/reportList/getReportInfo",
					method: "GET",
					data: {
						id
					},
					success: res => {
						if (res.data.state == 1) {
							this.reportinfo = res.data.data || {};
						}
					}
				});
			},
			addreport() {
				const item = this.option;
				uni.navigateTo({
					url: "../addreport/addreport?warningMessageID=" +
						item.warningMessageID +
						"&departmentId=" +
						item.departmentId +
						"&departmentName=" +
						item.departmentName
				});
			}
		}
	};
</script>

<style scoped>
	/* uni-page-body {
		height: 100%;
	} */

	.reportdetail {
		height: 100%;
		background-color: #f9f9f9;
	}

	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;
	}

	.adress,
	.depart,
	.reportuser,
	.reporttime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: #fff; */
		border-bottom: 1px solid #ccc;
		margin-bottom: 5px;
		padding: 15px 30px;
		font-size: 12px;
		color: #009ff1;
		text-align: right;
	}

	.imginfo,
	.vidioinfo {
		padding: 15px 30px;
		line-height: 24px;
		/* background: #fff; */
	}

	.imginfo {
		display: flex;
		flex-direction: column;
		margin-bottom: 5px;
		border-bottom: 1px solid #ccc;
	}

	.vidioinfo {
		display: flex;
		flex-direction: column;
	}

	.addreport {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		border-radius: 50px;
		background-color: #009ff1;
		color: #fff;
		font-size: 26px;
		margin: 10px auto;
	}

	text {
		color: #fff;
	}
</style>
